LinHuijuan's Blog

一些效果实现

# 一些效果实现

[TOC]

# 一、图形绘制

# 1.1 三角形

参考教程： CSS绘制三角形的原理剖析 (opens new window)

直角三角形的实现过程 (opens new window)

/* 倒三角形（正方形的四分之一）*/
.triangle1 {
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: #ccc transparent transparent transparent
}

/* 正方形对角线下的直角三角形 */
.triangle2 {
    height: 0;
    width: 0;
    border-bottom: 100px solid yellow;
    border-right: 100px solid transparent;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 1.2 梯形

.trapezoid {
    height: 0;
    width: 100px;
    border-bottom: 100px solid yellow;
    border-right: 100px solid transparent;
}
1
2
3
4
5
6

# 1.3 扇形

.sector {
    width: 0;
    height: 0;
    /* 先实现一个圆形 */
    border: 50px solid;
    border-radius: 50px;
    border-color: #ccc transparent transparent;
}
1
2
3
4
5
6
7
8

# 1.4 同心圆

  • box-shadow
    • 第四个参数（扩张半径）控制投影面积，其他两个偏移量和模糊半径都设置为0。
    • 注意事项：1. 不会影响布局。2. 不会响应鼠标事件，这时可在末尾加上inset。
box-shadow: 0 0 0 3px yellowgreen, 0 0 0 6px yellow;  /* h-shadow; v-shadow; blur; spread; color */
1
  • radial-gradient
background-image: radial-gradient(red, green, blue);
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
1
2
  • border

# 1.5 圆形与椭圆形兼备

.badge {
    display: inline-block;
    box-sizing: border-box;
    background: $error-c;
    border-radius: 999rem;
    font-size: 12px;
    line-height: 12px;
    color: #fff;
    padding: 1% 2.5%;
    margin-left: 8px;
}
1
2
3
4
5
6
7
8
9
10
11

# 二、无需JS的功能实现

# 2.1 单词首字母大写

/* 首字母大写 */
.capitalize {
    text-transform: capitalize;
}

/* 全部大写/小写 */
text-transform: uppercase / lowercase
1
2
3
4
5
6
7

# 2.2 超出部分省略显示

.ellipsis{
    overflow:hidden; //超出的文本隐藏
    text-overflow:ellipsis; //溢出用省略号显示
    white-space:nowrap; //溢出不换行   
}

/* 多行截断 */
/* 局限性：只能在webkit内核中实现 */
.ellipsis(@num) {
  display: -webkit-box;
  -webkit-box-orient: vertical; // 设置方向为纵向
  overflow: hidden;
  -webkit-line-clamp: @num; // 显示几行文本
  text-overflow: ellipsis;
  word-break: break-all;	// 允许任意字符间断行
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2.3 粘性布局

.sticky {
    position: sticky;
    top: 0;
}
1
2
3
4
  • 祖先元素的overflow不可以出现为hidden。

# 三、常用的效果实现

# 3.1 清除浮动

  • 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或另一个浮动元素。
  • 清除浮动主要是为了解决父元素高度坍塌的问题。

# 3.1.1 clear（最佳方法）

  • clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。
  • 通过别的元素上清除浮动来实现撑开高度。
/* 在父元素上添加 */
.clearfix:after{
    content:"";
    display:block;
    clear:both;
    /* 确保这个小块不会显示在页面上 */
    visibility:hidden;
}
1
2
3
4
5
6
7
8

# 3.1.2 触发BFC

.box-wrapper{
    /* 局限：元素阴影或下拉菜单会被截断 */
    overflow: hidden;
}
1
2
3
4

# 3.2 滚动条滚动到指定锚点

# 3.2.1 a标签跳转到对应id

<a href="#content1"></a>
<div id="content1">跳到这里</div>
1
2

# 3.2.2 Element.scrollIntoView()

// 将某个元素跳转到浏览器视口的最上方
element.scrollIntoView()
1
2
  • 参数
    • Boolean型参数：true-元素的顶端将和其所在滚动区的可视区域的顶端对齐 ； false-元素的底端将和其所在滚动区的可视区域的底端对齐。
    • Object型参数：{ behavior: "auto"(默认) | "instant" | "smooth"(缓动), block: "start" | "end", }

# 3.2.3 css(推荐)

在需要滚动的div添加

scroll-behavior: smooth; // 滚动条缓慢滚动
1

# 3.3 暗黑效果

html {
    filter: invert(1) hue-rotate(180deg);
}
html img {	/* 只是为了反转 */
    filter: invert(1) hue-rotate(180deg);
}
a {	/* 只是为了反转 */
    filter: invert(1) hue-rotate(180deg);
}
1
2
3
4
5
6
7
8
9

# 3.4 图片与文本底部之间存在空白

  • 首先vertical-align的默认是值是baseline（西文排版的概念），则p、g、q下面的小尾巴就会出现在baseline的下面，而图片的baseline就是图片的下边框。也就是说，图片下面的那部分空白的高度，就是baseline与bottom之间的距离。
  • 解决方案：
    1. 将图片和文本的vertical-align都设为bottom，则视觉上底部都在一条线上。
    2. flex布局

# 3.5 悬浮边框动画

参考教程：CSS八种让人眼前一亮的HOVER效果 (opens new window)

button {
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}

button:before,
button:after {
    box-sizing: inherit;
    position: absolute;
    content: '';
    border: 2px solid transparent;
    width: 0;
    height: 0;
}

button::after {
    bottom: 0;
    right: 0;
}

button::before {
    top: 0;
    left: 0;
}

button:hover::before,
button:hover::after {
    width: 100%;
    height: 100%;
}

button:hover::before {
    border-top-color: #4361ee;
    border-right-color: #4361ee;
    transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}

button:hover::after {
    border-bottom-color: #4361ee;
    border-left-color: #4361ee;
    transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 0.9s;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 3.6 移动端去掉点击热区

outline: none;
-webkit-tap-highlight-color: transparent;
1
2

# 3.7 文本两端对齐

.label {
    // white-space: nowrap;
    text-align: justify;
    // 高度最好写死
    height: 20px;
    line-height: 20px;

    &::after { // 可以填充(兼容浏览器)
        width: 100%;
        content: "";
        display: inline-block;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 3.8 换行

/* 强制不换行 */
div {white-space:nowrap;}

/* 自动换行 */
div {
    word-wrap: break-word;
    word-break: normal;	/* 默认 */
}

/* 强制英文单词断行 */
div {
    word-break: break-all;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 3.9 使用默认系统字体

font-family: system-ui
1

# 四、交互优化

# 4.1 扩大点击区域

.btn::befoer{
  content:"";
  position:absolute;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;
}
1
2
3
4
5
6
7
8

# 4.2 平滑滚动

scroll-behavior: smooth; /* 在可滚动容器上添加 */
1

# 4.3 快速选择指定内容

将需要一次选中的内容进行包裹，用户只需要点击一次，就可以选中该段信息

user-select: all  // none的话，即为禁止选择
1

# 五、样式优化

# 5.1 会变的渐变色

.gradient {
    background-image: linear-gradient(92deg, #f66 0%, #f90 100%);
    background-clip: text;
    color: #f66;
    animation: hue 60s infinite linear;
    -webkit-text-fill-color: transparent;
}

@keyframes hue {
	from {
		filter: hue-rotate(0);
	}
	to {
		filter: hue-rotate(-360deg);
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

FlexBox 弹性布局